<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS基本语法</title>
    <style>
*{
    box-sizing: border-box;
}
.header{
    border:1px solid red;
}
.menu{
    width:25%;
    float:left;
    border:1px solid red;
}
.main{
    width:75%;
    float:left;
    border:1px solid red;
}
    </style>
</head>

<body>
    <div class="header"><h1>Chania</h1></div>
    <div class="menu">
        <ul>
            <li>The Flisht</li>
            <li>The City</li>
            <li>The Island</li>
            <li>The Food</li>
        </ul>
    </div>
    <div class="main">
        <H1>The City</H1>
        <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
        <p>
            Resize the browser window to see how the content respond to the resizing.
        </p>
    </div>
</body>

</html>